{% macro warnings_and_loader() -%}
  <div ng-cloak>
    <div class="oppia-alert-blocks">
      <div ng-repeat="warning in (warningsData.warnings | limitTo:5) track by $index">
        <p class="alert alert-warning">
          <button type="button" class="close" ng-click="warningsData.deleteWarning($index)">&times;</button>
          <strong>Warning!</strong>
          <[warning]>
        </p>
      </div>
    </div>

    <div ng-show="loadingMessage" class="oppia-loading-fullpage">
      <div class="oppia-align-center">
        <[loadingMessage]>
        <span class="oppia-loading-dot-one">.</span>
        <span class="oppia-loading-dot-two">.</span>
        <span class="oppia-loading-dot-three">.</span>
      </div>
    </div>
    <div ng-show="!loadingMessage">
      {% block content %}{% endblock %}
    </div>
  </div>
{%- endmacro %}

<!DOCTYPE html>
<html ng-app="oppia" ng-controller="Base" itemscope itemtype="http://schema.org/Organization">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <meta name="msapplication-config" content="none">
    <link rel="apple-touch-icon" href="/images/logo/favicon.png">
    <title itemprop="name">{% block maintitle %}Oppia{% endblock %} - {% block subtitle %}{% endblock %}</title>

    {% block header_css %}
      {% include 'header_css_libs.html' %}
    {% endblock header_css %}

    <script>
      var GLOBALS = {
        ADDITIONAL_ANGULAR_MODULES: [],
        csrf_token: JSON.parse('{{csrf_token|js_string}}'),
        DEV_MODE: JSON.parse('{{DEV_MODE|js_string}}'),
        NAV_MODE:
          {% if nav_mode %}
            JSON.parse('{{nav_mode|js_string}}'),
          {% else %}
            null,
          {% endif %}
        INVALID_NAME_CHARS: JSON.parse('{{INVALID_NAME_CHARS|js_string}}'),
        EXPLORATION_STATUS_PRIVATE: JSON.parse(
          '{{EXPLORATION_STATUS_PRIVATE|js_string}}'),
        EXPLORATION_STATUS_PUBLIC: JSON.parse(
          '{{EXPLORATION_STATUS_PUBLIC|js_string}}'),
        EXPLORATION_STATUS_PUBLICIZED: JSON.parse(
          '{{EXPLORATION_STATUS_PUBLICIZED|js_string}}'),
        ALL_LANGUAGE_CODES: JSON.parse(
          '{{ALL_LANGUAGE_CODES|js_string}}'),
        DEFAULT_LANGUAGE_CODE: JSON.parse(
          '{{DEFAULT_LANGUAGE_CODE|js_string}}'),
        RTE_COMPONENT_SPECS: JSON.parse('{{RTE_COMPONENT_SPECS|js_string}}'),
        userIsLoggedIn: JSON.parse('{{user_is_logged_in|js_string}}')
      };

      {% if additional_angular_modules %}
        GLOBALS.ADDITIONAL_ANGULAR_MODULES = JSON.parse('{{additional_angular_modules|js_string}}');
      {% endif %}
    </script>

    {% block header_js %}
      {% include 'header_js_libs.html' %}
    {% endblock header_js %}

    {{BEFORE_END_HEAD_TAG_HOOK}}
  </head>

  <body>
    {% if iframed %}
      {{ warnings_and_loader() }}
    {% else %}
      <div class="oppia-base-container" ng-class="{'oppia-sidebar-menu-open': sidebarIsShown, 'oppia-sidebar-menu-closed': !sidebarIsShown}">
        <div class="oppia-content-container">
          <div id="wrapper">
            <div class="oppia-main-body">

              <!-- Top navigation. -->
              <nav class="navbar navbar-default oppia-navbar oppia-prevent-selection" role="navigation">
                <div class="navbar-container">
                  <div class="navbar-header protractor-test-navbar-header pull-left">
                    <a ng-click="openSidebar()" class="navbar-brand oppia-navbar-menu">
                      <img src="/images/general/menu.png">
                    </a>
                    <a class="oppia-navbar-brand-name" href="/gallery">
                      <img src="/images/logo/288x128_logo_white.png" class="oppia-logo">
                    </a>
                    <!-- This is needed for the correct image to appear when an exploration is shared using G+. -->
                    <a style="display: none;">
                      <img src="/images/logo/288x128_logo_mint.png" itemprop="image">
                    </a>
                  </div>

                  <div class="navbar-header pull-right">
                    <ul class="nav oppia-navbar-nav oppia-navbar-profile">
                      {% if username %}
                        <li class="dropdown pull-right">
                          <a class="dropdown-toggle oppia-navbar-profile-dropdown-toggle" data-toggle="dropdown" ng-mouseover="onMouseoverProfilePictureOrDropdown($event)" ng-mouseleave="onMouseoutProfilePictureOrDropdown($event)">
                            <div class="oppia-navbar-profile-picture-container">
                              {% if profile_picture_data_url %}
                                <img src="{{profile_picture_data_url}}" class="oppia-navbar-profile-picture img-circle">
                              {% else %}
                                <img ng-if="profileDropdownIsActive" src="/images/general/user_mint_48px.png" class="oppia-navbar-profile-picture">
                                <img ng-if="!profileDropdownIsActive" src="/images/general/user_white_48px.png" class="oppia-navbar-profile-picture">
                              {% endif %}
                              <span class="caret" style="margin-top: 10px;"></span>

                              <div class="oppia-navbar-dashboard-indicator ng-cloak" ng-if="numUnseenNotifications > 0">
                                <span class="oppia-navbar-dashboard-indicator-text">
                                  <[numUnseenNotifications]>
                                </span>
                              </div>

                              {% if is_admin or is_moderator %}
                                <div class="oppia-navbar-role-indicator">
                                  {% if is_admin %}
                                    <!-- "right: 4px;" is necessary here but not in moderator to prevent 'A' from appearing off-center because 'A' is slightly thinner than 'M' in this font -->
                                    <span class="oppia-navbar-role-text" style="right: 4px;">A</span>
                                  {% elif is_moderator %}
                                    <span class="oppia-navbar-role-text">M</span>
                                  {% endif %}
                                </div>
                              {% endif %}
                            </div>
                          </a>
                          <ul class="dropdown-menu ng-cloak oppia-navbar-profile-dropdown" role="menu" ng-mouseover="onMouseoverProfilePictureOrDropdown($event)" ng-mouseleave="onMouseoutProfilePictureOrDropdown($event)">
                            <li>
                              <a href="/my_explorations">
                                My Explorations
                              </a>
                            </li>
                            <li>
                              <a href="/timeline">
                                Updates
                                <span ng-if="numUnseenNotifications > 0">
                                  (<[numUnseenNotifications]>)
                                </span>
                              </a>
                            </li>
                            <li>
                              <a href="/preferences">Preferences</a>
                            </li>

                            {% if is_moderator %}
                              <li>
                                <a href="/moderator" target="_blank">
                                  Moderator Page
                                </a>
                              </li>
                            {% endif %}
                            {% if is_super_admin %}
                              <li>
                                <a href="/admin" target="_blank">
                                  Admin Page
                                </a>
                              </li>
                            {% endif %}
                            <li>
                              <a href="{{logout_url}}">Logout</a>
                            </li>
                          </ul>
                        </li>
                      {% else %}
                        <li class="dropdown oppia-clickable-dropdown pull-right">
                          <a href="{{login_url}}" class="oppia-navbar-profile-dropdown-toggle" style="font-size: 1em; padding-top: 17px;">
                            Sign in
                            <span class="caret"></span>
                          </a>
                          <ul class="dropdown-menu oppia-navbar-profile-dropdown" role="menu" style="padding: 0;" ng-mouseover="onMouseoverDropdownMenu($event)" ng-mouseleave="onMouseoutDropdownMenu($event)">
                            <li>
                              <a href="{{login_url}}" style="padding: 0; width: 200px;">
                                <img src="/images/signin/Red-signin-Long-base-44dp.png">
                              </a>
                            </li>
                          </ul>
                        </li>
                      {% endif %}
                    </ul>
                  </div>
                  <div class="collapse navbar-collapse ng-cloak">
                    {% block navbar_breadcrumb %}
                    {% endblock navbar_breadcrumb %}

                    {% block local_top_nav_options %}
                    {% endblock %}
                  </div>
                </div>
                </div>
              </nav>

              <div class="oppia-top-of-page-padding">
              </div>

              {{ warnings_and_loader() }}
            </div>

            {% include 'side_nav.html' %}

          </div>
        </div>
      </div>
    {% endif %}

    {% include 'directives.html' %}
    {% include 'forms/form_builder_templates.html' %}
    {% include 'footer_js_libs.html' %}

    <script>
      {{ include_js_file('app.js') }}
      {{ include_js_file('directives.js') }}
      {{ include_js_file('filters.js') }}
      {{ include_js_file('forms/formBuilder.js') }}
      {{ include_js_file('services/activeInputData.js') }}
      {{ include_js_file('services/warningsData.js') }}
      {{ include_js_file('services/messengerService.js') }}
      {{ include_js_file('components/autocomplete.js') }}
      {{ include_js_file('components/visualizations.js') }}
      {{ include_js_file('base.js') }}
      {{ include_js_file('/expressions/evaluator.js') }}
      {{ include_js_file('/expressions/parser.js') }}
      {{ include_js_file('components/objectEditor.js') }}
      {{ OBJECT_EDITORS_JS }}
    </script>

    {% block footer_js %}
    {% endblock footer_js %}

  </body>
</html>
